<template>
  <div class="bubble-container">
    <div
      v-for="index in bubbleCount"
      :key="index"
      class="bubble"
      :style="bubbleStyle(index)"
    ></div>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';

// 定义 props
const props = defineProps({
  bubbleCount: { // 气泡数量
    type: Number,
    default: 15,
  },
  minSize: { // 最小尺寸
    type: Number,
    default: 10,
  },
  maxSize: { // 最大尺寸
    type: Number,
    default: 40,
  },
  minSpeed: { // 最小速度
    type: Number,
    default: 10,
  },
  maxSpeed: { // 最大速度
    type: Number,
    default: 15,
  },
  minDelay: { // 最小延迟
    type: Number,
    default: 0,
  },
  maxDelay: { // 最大延迟
    type: Number,
    default: 5,
  },
  waveOffsetRange: { // 波动偏移范围
    type: Number,
    default: 25,
  },
  waveFrequencyRange: { // 波动频率范围
    type: Number,
    default: 1,
  },
});

// 计算气泡样式
const bubbleStyle = (index) => {
  return {
    '--size': `${Math.random() * (props.maxSize - props.minSize) + props.minSize}px`,
    '--left': `${Math.random() * 100}%`,
    '--delay': `${Math.random() * (props.maxDelay - props.minDelay) + props.minDelay}s`,
    '--duration': `${Math.random() * (props.maxSpeed - props.minSpeed) + props.minSpeed}s`,
    '--wave-offset': `${Math.random() * props.waveOffsetRange * 2 - props.waveOffsetRange}px`,
    '--wave-frequency': `${Math.random() * props.waveFrequencyRange + 1}`,
  };
};
</script>

<style lang="scss" scoped>
.bubble-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}

.bubble {
  position: absolute;
  bottom: -50px;
  left: var(--left);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
  animation: float var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);

  &::after {
    content: '';
    position: absolute;
    width: 70%;
    height: 70%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    top: 15%;
    left: 15%;
  }
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0) scale(0.8);
    opacity: 0;
  }

  10% {
    opacity: 1;
    transform: translateY(-10vh) translateX(calc(var(--wave-offset) * 0.1)) scale(0.9);
  }

  50% {
    transform: translateY(-50vh) translateX(calc(var(--wave-offset) * 0.5)) scale(1);
  }

  90% {
    opacity: 0.8;
    transform: translateY(-90vh) translateX(calc(var(--wave-offset) * 0.9)) scale(1.05);
  }

  100% {
    transform: translateY(-100vh) translateX(var(--wave-offset)) scale(0.8);
    opacity: 0;
  }
}
</style>